<template>

    <div class="tempOne" :class="{paddingTop:!disabled}">
        <!-- 上面部分 -->
        <div v-if="uploading" class="upload"> 正在上传</div>
        <div class="header" :style="bgStyle">
            <div class="content">
                <!--<input type="text" v-model="obj.headerTitle1" class="title1" maxlength="30" :placeholder="placeholder1" title="最多不超过30个字" :disabled="disabled">-->
                <input type="text" v-model="obj.headerTitle2" class="title2" maxlength="14" :placeholder="placeholder2" title="最多不超过14个字" :disabled="disabled">
                <div class="line"></div>
                <!-- <input type="text" v-model="headerContain" class="contain" maxlength="120"> -->
                 <textarea cols="5" class="contain" v-model="obj.headerContain" maxlength="48" :placeholder="placeholder3" title="最多不超过48个字" :disabled="disabled"></textarea>
            </div>
             <div class="content-trigon-zhijiao"></div>
        </div>
        <!-- 主标题 -->
        <div class="pageHeader">
            <input type="text" v-model="obj.pageheaderTitle1" class="title1" maxlength="10" :placeholder="placeholder4" title="最多不超过10个字" :disabled="disabled">
              <div class="line"></div>
            <input type="text" v-model="obj.pageheaderTitle2" class="title2" maxlength="18" :placeholder="placeholder5" title="最多不超过18个字" :disabled="disabled">
        </div>
        <!-- 中间传图 介绍部分 -->
        <div class="dec">
            <div class="input_pic">
                 <input @change="doUpload" ref="uploader" type="file" accept="image/*" title="建议上传230*355的图片" value=""  :disabled="disabled"/>
                 <div class="showImg">
                     <img :src="obj.Imgurl">
                 </div>
            </div>
            <div class="line"></div>
            <div class="decDetail">
                 <input type="text" v-model="obj.decTitle" class="title" maxlength="10" :placeholder="placeholder6" title="最多不超过10个字" :disabled="disabled">
                 <textarea cols="5" class="contain" v-model="obj.decContain" maxlength="90" :placeholder="placeholder7" title="最多不超过90个字" :disabled="disabled"></textarea>
            </div>
        </div>
        <!-- 中间文字介绍 -->
        <div class="detailDec">
            <textarea cols="5" class="contain1" v-model="obj.detailContain1" maxlength="90" :placeholder="placeholder8" title="最多不超过90个字" :disabled="disabled"></textarea>
            <!-- <div class="line"></div>
            <textarea cols="5" class="contain2" v-model="detailContain2" maxlength="60" :placeholder="placeholder9" title="最多不超过60个字"></textarea> -->
        </div>
        <!-- 中间轮播 第一个轮播图 -->
        <div class="mainSlide1">
            <input @change="doUpload1" class="uploadImg" ref="uploader" type="file" multiple="multiple" accept="image/*" title="建议上传670*452的图片" value="" :disabled="disabled"/>
            <el-carousel height="452px">
                <el-carousel-item v-for="item in obj.imageFile" :key="item.imgUrl">
                    <!-- <h3>{{ item }}</h3> -->
                    <img :src="item.imgUrl">
                </el-carousel-item>
            </el-carousel>
            <div class="textContent">
                 <input type="text" v-model="obj.slide1Title1" class="title1" maxlength="18" :placeholder="placeholder13" title="最多不超过18个字" :disabled="disabled">
                 <div class="line"></div>
                 <input type="text" v-model="obj.slide1Title2" class="title2" maxlength="30" :placeholder="placeholder14" title="最多不超过30个字" :disabled="disabled">
                 <textarea cols="5" class="contain1" v-model="obj.slide1Contain1" maxlength="100" :placeholder="placeholder15" title="最多不超过100个字" :disabled="disabled"></textarea>
            </div>
        </div>
         <!-- 中间轮播 第二个轮播图 -->
        <div class="mainSlide2">
              <input @change="doUpload2" class="uploadImg"  ref="uploader" type="file" multiple="multiple" accept="image/*"title="建议上传670*452的图片" value="" :disabled="disabled" />
            <el-carousel height="452px">
                <el-carousel-item v-for="item in obj.imageFile2" :key="item.imgUrl">
                    <!-- <h3>{{ item }}</h3> -->
                    <img :src="item.imgUrl">
                </el-carousel-item>
            </el-carousel>
            <div class="textContent">
                <div class="left">
                    <input type="text" v-model="obj.slide2Title1" class="title1" maxlength="10" :placeholder="placeholder16" title="最多不超过10个字" :disabled="disabled">
                    <div class="line"></div>
                    <input type="text" v-model="obj.slide2Title2" class="title2" maxlength="15" :placeholder="placeholder17" title="最多不超过15个字" :disabled="disabled">
                    <!-- <textarea cols="5" class="contain2" v-model="slide2Contain2" maxlength="30" :placeholder="placeholder12" title="最多不超过30个字"></textarea> -->
                </div>
                <div class="right">
                     <textarea cols="5" class="contain1" v-model="obj.slide2Contain1" maxlength="60" :placeholder="placeholder18" title="最多不超过60个字" :disabled="disabled"></textarea>
                </div>
            </div>
        </div>
        <!-- 中间轮播 第三个轮播图 -->
        <div class="mainSlide3">
              <input @change="doUpload3"  class="uploadImg" ref="uploader" type="file" multiple="multiple" accept="image/*" title="建议上传670*452的图片" value="" :disabled="disabled"/>
            <el-carousel height="452px">
                <el-carousel-item v-for="item in obj.imageFile3" :key="item.imgUrl">
                    <!-- <h3>{{ item }}</h3> -->
                    <img :src="item.imgUrl">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 底部文字 -->
        <div class="foot">
            <div class="left">
                 <textarea cols="5" class="contain1" v-model="obj.footContain1" maxlength="100" :placeholder="placeholder11" title="最多不超过100个字" :disabled="disabled"></textarea>
            </div>
            <div class="right">
                <input type="text" v-model="obj.footTitle1" class="title1" maxlength="8" :placeholder="placeholder10" title="最多不超过8个字" :disabled="disabled">
                 <!-- <input type="text" v-model="footTitle1" class="title2" maxlength="10" :placeholder="placeholder10" title="最多不超过28个字"> -->
               <textarea cols="5" class="contain2" v-model="obj.footContain2" maxlength="36" :placeholder="placeholder12" title="最多不超过36个字":disabled="disabled"></textarea>
            </div>
        </div>
        <!-- 不可编辑部分 -->
        <div class="showContent"  v-if='isshow'>
            <!-- <div class="contactConsultant" @click="concatItem">联系顾问</div>
             -->
                <img :src="serverUrl+'/temp/line-down.png'" alt="">
                <img :src="serverUrl+'/temp/temp01-1.png'" alt="">
        </div>
        <!-- 预览时不可编辑部分 -->
         <div class="hideContent" v-if='!isshow'>
             <div class="code">
                 <img :src="appcodeUrl">
             </div>
             <div class="num">
                 请填写手机号，置业顾问将以{{tel}}联络您。
             </div>
            <img :src="serverUrl+'/temp/temp01-2.png'" alt="">
        </div>
        <!-- 最底部 -->
        <div class="finalContent">
            <img :src="serverUrl+'/temp/line-up.png'" alt="" v-if='isshow' class="img_line">
            <div class="content">
                <div class="left">
                      <input @change="doUpload4" ref="uploader" type="file" accept="image/*" title="建议上传111*111的图片" value="" :disabled="disabled"/>
                    <div class="codeImg">
                        <img :src="obj.finalImg==''?'http://skyforest.static.elab-plus.com/detail/defaultCode.png':obj.finalImg">
                    </div>
                </div>
                <div class="right">
                      <input type="text" v-model="obj.finalTitle1" class="title1" maxlength="12" :placeholder="placeholder19" title="最多不超过12个字" :disabled="disabled">
                      <div class="line"></div>
                      <input type="text" v-model="obj.finalTitle2" class="title2" maxlength="18" :placeholder="placeholder20" title="最多不超过18个字" :disabled="disabled">
                      <!-- <input type="text" v-model="finalTitle3" class="title3" maxlength="10" :placeholder="placeholder21" title="最多不超过10个字" :disabled="disabled"> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import util from "../utils/util";
import { loginService } from "@/services";
import { Toast } from "mint-ui";
export default {
    props:{
        switchOn:Boolean,
        perviewOn:Boolean,
        updateData:String,
    },
    data() {
        var serverUrl = "http://skyforest.static.elab-plus.com/";
        return {
            isshow:true, //是否显示有蒙版的不可编辑部分
            serverUrl:serverUrl,
            tel:'',  //项目关联手机号
            appcodeUrl:'',
            customerId:'',
            isSend:'', //是否跟顾问聊过天
            // headerTitle1:'', //头部第一行标题
            // headerTitle2:'',//头部第二行标题
            // headerContain:'',//头部介绍详情
            // pageheaderTitle1:'', //中间页面主标题
            // pageheaderTitle2:'', //中间页面主标题下的副标题
            // decTitle:'', //中间上传图片标题
            // decContain:'', //中间上传图片详情介绍
            // detailContain1:'', //中间详细介绍左边
            // detailContain2:'',//中间详细介绍右边
            // footTitle1:'',  //底部左边标题
            // footContain1:'',//底部右边文字
            // footContain2:'',//底部右边文字
            // slide1Title1:'', //第一个轮播标题1
            // slide1Title2:'',//第一个轮播标题2
            // slide1Contain1:'',//第一个轮播内容1
            // slide2Title1:'',//第二个轮播标题1
            // slide2Title2:'',//第二个轮播标题2
            // slide2Contain1:'',//第二个轮播内容
            // finalTitle1:'',//最底部标题1
            // finalTitle2:'',//最底部标题1
            // finalTitle3:'',//最底部标题1
               obj:{
                headerTitle1:'', //这个如果没有不显示
                headerTitle2:'',//头部标题
                headerContain:'',//头部介绍详情
                pageheaderTitle1:'', //中间页面主标题
                pageheaderTitle2:'', //中间页面主标题下的副标题
                decTitle:'', //中间上传图片标题
                decContain:'', //中间上传图片详情介绍
                detailContain1:'', //中间详细介绍一大段
                slide1Title1:'', //第一个轮播标题1
                slide1Title2:'',//第一个轮播标题2
                slide1Contain1:'',//第一个轮播内容
                slide2Title1:'',//第二个轮播左边标题1
                slide2Title2:'',//第二个轮播左边标题2
                slide2Contain1:'',//第二个轮播右边描述内容
                footContain1:'',//第三个轮播底下左边描述文字
                footTitle1:'',  //第三个轮播底下右边标题
                footContain2:'',//第三个轮播底下右边文字
                finalTitle1:'',//最底部标题1
                finalTitle2:'',//最底部标题1
                // 第一个轮播图
                 imageFile:[
                { "imgUrl" : `${serverUrl}temp/pic01.png`},
                { "imgUrl" : `${serverUrl}temp/pic02.png`},
                { "imgUrl" : `${serverUrl}temp/pic03.png`}
            ],
            // 第2个轮播图
            imageFile2:[
                { "imgUrl" : `${serverUrl}temp/pic01.png`},
                { "imgUrl" : `${serverUrl}temp/pic02.png`},
                { "imgUrl" : `${serverUrl}temp/pic03.png`}
                ],
                 // 第3个轮播图
            imageFile3:[
                { "imgUrl" : `${serverUrl}temp/pic01.png`},
                { "imgUrl" : `${serverUrl}temp/pic02.png`},
                { "imgUrl" : `${serverUrl}temp/pic03.png`}
                ],
                Imgurl:`${serverUrl}temp/pic01.png`, //上面左边上传图片
                finalImg:'',   //最底部上传图片
             },
            placeholder1:'为什么是宁波？',
            placeholder2:'新晋一线城市 新一轮投资机遇',
            placeholder3:'宁波跻身准一线城市：齐一线城市租金，准三线城市房价。城市扩容补涨在即：2018年核心区出让地块楼板价超2万元',
            placeholder4:'路劲WIII公寓艳现宁波',
            placeholder5:'绝佳增益型收藏绝佳增益型收藏绝佳增益',
            placeholder6:'创新三体公寓',
            placeholder7:'WIII提供5万方商业圈和3万方社交圈。创新打造每3层一组的4000平米垂直沙龙。立足于三进院落，三层墅级享受，三重乐活生态。路劲品牌助力，运营保障。即买即住，商业先行。',
            placeholder8:'在我们的设计理念中，公寓用来连接90后和老外滩，融合现代和传统，兼具分享和私密，跨越新兴人类跳脱的生活节奏和传统在我们的',
            placeholder9:'在我们的设计理念中，公寓用来连接90后和老外滩，融合现代和传统，兼具分享和私密，跨越新兴人类跳脱的生活节奏和传统在我们的',
            placeholder10:'WIII的人居故事',
            placeholder11:'WIII提供了从小户型单人居到双钥匙四人居的全面户型，拥有3.3米层高的soho户型和4.5米层高的loft户型，每种户型都有别墅级场景专属打造。户型A的中岛大厨房，户型B的景观吧台，户型C的步入式衣帽间。',
            placeholder12:'从单人居到四人居，社区内即可完成户型置换从单人居到四人居',
            placeholder13:'城市蜜糖区里的大家闺秀',
            placeholder14:'办公商业公寓综合体，颜值身家才情兼备',
            placeholder15:'WIII坐落在宁波的三江口，比拟上海的外滩、杭州的西湖湖滨和苏州的观前街，拥有得天独厚的人文、环境、旅游优势。同时，路劲依托自身品牌和管理优势，自持5万方商业，打造办公商业综合体，围绕公寓形成人居生活、人流消费。',
            placeholder16:'WIII户型效果图预览',
            placeholder17:'WIII开盘在即，轻奢精装揭开面纱',
            placeholder18:'WIII即将在6月正式开盘，对外销售2号楼和3号楼，其中2号楼主打建筑面积45平左右的一室小户型和建筑面积约68平的一室一厅、71平',
            placeholder19:'点击这里输入标题',
            placeholder20:'点击这里输入标题',
            placeholder21:'点击这里输入标题',

            uploading:false,

            bgStyle: `background:url('${serverUrl}/temp/BG.png')no-repeat left bottom `,
            disabled:false,
        };
    },
    watch:{
        switchOn(val){
            if(val){
                // console.log('1111111',this.headerTitle1)
                // console.log('2222222222',this.obj)
                this.$emit('com',this.obj)
            }
        },
        perviewOn(val){
                this.disabled=val;
                this.isshow=!val;

        },
        updateData(val){
            if(val){
                // console.log('1111');
                // console.log(val);
                val=JSON.parse(val);
                this.obj.headerTitle1=val.headerTitle1;
                this.obj.headerTitle2=val.headerTitle2;
                this.obj.headerContain=val.headerContain;
                this.obj.pageheaderTitle1=val.pageheaderTitle1;
                this.obj.pageheaderTitle2=val.pageheaderTitle2;
                this.obj.decTitle=val.decTitle;
                this.obj.decContain=val.decContain;
                this.obj.detailContain1=val.detailContain1;
                this.obj.slide1Title1=val.slide1Title1;
                this.obj.slide1Title2=val.slide1Title2;
                this.obj.slide1Contain1=val.slide1Contain1;
                this.obj.slide2Title1=val.slide2Title1;
                this.obj.slide2Title2=val.slide2Title2;
                this.obj.slide2Contain1=val.slide2Contain1;
                this.obj.footTitle1=val.footTitle1;
                this.obj.footContain2=val.footContain2;
                this.obj.footContain1=val.footContain1;
                this.obj.finalTitle1=val.finalTitle1;
                this.obj.finalTitle2=val.finalTitle2;
                this.obj.imageFile=val.imageFile;
                this.obj.imageFile2=val.imageFile2;
                this.obj.imageFile3=val.imageFile3;
                this.obj.finalImg=val.finalImg;
                this.obj.Imgurl=val.Imgurl;
            }
        }
    },
    mounted() {
       if(this.updateData){
           this.obj=JSON.parse(this.updateData);
       }
       console.log(this.obj,'oooooooooooo')
        this.customerId = localStorage.getItem('localCustomerId');
        this.isSend = localStorage.getItem(this.customerId+'&isSendMsg');
        this.appcodeUrl=localStorage.getItem('_appQrcode');
        this.tel=localStorage.getItem('_projectTel');

    },
    methods: {
        // 联系顾问
        concatItem(){
            // console.log('联系顾问')
            if(this.isSend&&this.customerId){
                 this.$router.push({ name: "messageList" });
            }else{
                this.$router.push({ name: "adviserList" });
            }

        },
        // 单张上传图片
        async doUpload(evt){
            let files=evt.target.files;
            // if(files.length===0){
            //     Toast('请选择需要上传的图片');
            //     return
            // }
            let file = files[0];
            if(!file){
                return false;
            }
            if(!file.type.match('image.*')){
                Toast('请小于5M的图片');
                return
            }
            this.uploading=true;
            let form = new FormData();
			form.append('type','qiniu_upload');
			form.append('folder','template');
			form.append('uploadFile',file)
			form.append('fileName',file.name)
            let result=await loginService.uploadFile(form);
			console.log(result,'gggggg')
            if(result.data.success){
                this.uploading=false;
                // console.log(result);
                this.obj.Imgurl=result.data.single.filepath;
                // console.log(this.Imgurl)
                Toast('图片上传成功')
            }else{
                Toast('图片上传失败');
            }
        },
        // 多张上传图片 第一个轮播
          async doUpload1(evt){
            let files=evt.target.files;
            if(files.length>8){
                Toast('上传最多不能超过8张图片哦');
                return
            }
              let file = files[0];
              if(!file){
                  return false;
              }
            // var imageFile = new Array();
             this.uploading=true;
            this.obj.imageFile=[];
            for(var i = 0; i<files.length; i++){
                if(!files[i].type.match('image.*')){
                    Toast('第'+(i+1)+'张图片请选择小于5M的图片');
                    return
                }
                // console.log(files[i].name);
                let form = new FormData();
                form.append('type','qiniu_upload');
                form.append('folder','template');
                form.append('uploadFile',files[i]);
                form.append('fileName', files[i].name);
                let result=await loginService.uploadFile(form);
                if(result.data.success){
                     this.uploading=false;
                    this.obj.imageFile.push({
                        "imgUrl" : result.data.single.filepath
                    });
                    // console.log(this.obj.imageFile);
                }else{
                    Toast('图片上传失败');
                }
            }
        },
        // 多张上传图片 第2个轮播
          async doUpload2(evt){
            let files=evt.target.files;
            if(files.length>8){
                Toast('上传最多不能超过8张图片哦');
                return
            }
              let file = files[0];
              if(!file){
                  return false;
              }
            // var imageFile = new Array();
            this.uploading=true;
            this.obj.imageFile2=[];
            for(var i = 0; i<files.length; i++){
                if(!files[i].type.match('image.*')){
                    Toast('第'+(i+1)+'张图片请选择小于5M的图片');
                    return
                }
                // console.log(files[i].name);
                let form = new FormData();
                form.append('type','qiniu_upload');
                form.append('folder','template');
                form.append('uploadFile',files[i]);
                form.append('fileName', files[i].name);
                let result=await loginService.uploadFile(form);
                if(result.data.success){
                     this.uploading=false;
                    this.obj.imageFile2.push({
                        "imgUrl" : result.data.single.filepath
                    });
                    // console.log(this.obj.imageFile2);
                }else{
                    Toast('图片上传失败');
                }
            }
        },
        // 多张上传图片 第3个轮播
          async doUpload3(evt){
            let files=evt.target.files;
              if(files.length>8){
                Toast('上传最多不能超过8张图片哦');
                return
            }
              let file = files[0];
              if(!file){
                  return false;
              }
            this.uploading=true;
            // var imageFile = new Array();
            this.obj.imageFile3=[];
            for(var i = 0; i<files.length; i++){
                if(!files[i].type.match('image.*')){
                    Toast('第'+(i+1)+'张图片请选择小于5M的图片');
                    return
                }
                // console.log(files[i].name);
                let form = new FormData();
                form.append('type','qiniu_upload');
                form.append('folder','template');
                form.append('uploadFile',files[i]);
                form.append('fileName', files[i].name);
                let result=await loginService.uploadFile(form);
                if(result.data.success){
                    this.uploading=false;
                    this.obj.imageFile3.push({
                        "imgUrl" : result.data.single.filepath
                    });
                    // console.log(this.obj.imageFile3);
                }else{
                    Toast('图片上传失败');
                }
            }
        },
         // 单张上传图片  最底部
        async doUpload4(evt){
            let files=evt.target.files;
            // if(files.length===0){
            //     Toast('请选择需要上传的图片');
            //     return
            // }
            let file = files[0];
            if(!file.type.match('image.*')){
                Toast('请小于5M的图片');
                return
            }
            if(!file){
                return false;
            }
            this.uploading=true;
            let form = new FormData();
			form.append('type','qiniu_upload');
			form.append('folder','template');
			form.append('uploadFile',file)
			form.append('fileName',file.name)
            let result=await loginService.uploadFile(form);
            if(result.data.success){
                this.uploading=false;
                // console.log(result);
                this.obj.finalImg=result.data.single.filepath;
                // console.log(this.Imgurl)
                Toast('图片上传成功')
            }else{
                Toast('图片上传失败');
            }
        },
    },
};
</script>

<style lang="scss" scoped>
    .paddingTop{
        padding-top:80px;
    }
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

    .tempOne{
        width:750px;
        // height:100%;

        margin:0 auto;
        textarea{
            resize: none;
        }

        .header{
            height:323px;
            width:100%;
            background:lightblue;
            .content{
                height:163px;
                width:100%;
                 padding-top:30px;

                input{
                    display:block;
                    text-align:center;
                    width:100%;
                    background:none;
                    border:0;
                    color: #FFFFFF;

                }
                textarea{
                    display:block;
                    // text-align:center;
                    width:78%;
                    margin-left:11%;
                    background:none;
                    border:0;
                    color: #FFFFFF;
                    margin-top:20px;
                }
                .title1{
                    font-size: 20px;
                    line-height:29px;
                }
                .title2{
                    font-size: 26px;
                    line-height:38px;
                }
                .contain{
                    font-size: 24px;
                    // line-height:1.3;
                    height:86px;
                    white-space:normal;
                    margin-top:5px;
                 }
                 .line{
                     width:78%;
                     height:2px;
                     background:#fff;
                     margin-left:11%;
                 }
            }
             .content-trigon-zhijiao {
                width: 0px;
                height: 0px;
                border-color:#fff transparent;
                border-width: 0 750px 130px 0;
                border-style: solid;
            }
        }
        .pageHeader{
            width:100%;
            height:290px;
            background:#fff;
            input{
                    display:block;
                    text-align:center;
                    width:100%;
                    background:none;
                    border:0;
                    color: #737373;

            }
            .title1{
                font-size: 62px;
                padding-top:70px;
            }
            .title2{
                font-size: 34px;
            }
            .line{
                    width:78%;
                    height:2px;
                    background:#737373;
                    margin:7px 0 7px 11%;

                 }
        }
        .dec{
            width:100%;
            height:318px;
            background: #CDC9BE;
            .input_pic{
                float:left;
                height:100%;
                width:40%;
                position:relative;
                input{
                   width:230px;
                    height:355px;
                    position:absolute;
                    left:40px;
                    top:40px;
                     z-index: 99;
                     border:0;
                     background:none;
                     opacity:0;
                }
                .showImg{
                    width:230px;
                    height:355px;
                    position:absolute;
                    left:40px;
                    top:40px;
                    background:lightblue;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
            .line{
                float:left;
                height:50%;
                margin-top:100px;
                background: #737373;
                width:2px;
            }
            .decDetail{
                float:left;
                height:141px;
                // margin-top:100px;
                width:58%;
                input{
                    display:block;
                    text-align:center;
                    width:100%;
                    background:none;
                    border:0;
                    color: #737373;
                }
                .title{
                    height:50px;
                    line-height:50px;
                    width:80%;
                    margin-left:10%;
                    font-size: 34px;
                    margin-top:45px;
                }
                .contain{
                    height:190px;
                    width:80%;
                    font-size: 24px;
                    margin-left:10%;
                     background:none;
                    border:0;
                    margin-top:8px;
                }
            }
        }
        .detailDec{
            width:100%;
            height:379px;
            background:#fff;
            textarea{
                display:block;
                text-align:left;
                width:70%;
                float:left;
                margin:0 15%;
                padding-top:140px;
                height:180px;
                background:none;
                border:0;
                color: #FFFFFF;
                margin-top:20px;
                font-size: 24px;
                color: #737373;
            }
            .line{
                width:2px;
                height:140px;
                margin-top:140px;
                float:left;
                background:#737373;
            }
        }
        .mainSlide1, .mainSlide2{
            width:100%;
            height:830px;
            background: #CDC9BE;
            position:relative;
            .uploadImg{
                position:absolute;
                top:40px;
                left:140px;
                width:470px;
                height:452px;
                border:0;
                background:none;
                z-index:10;
                opacity:0;
            }
             .el-carousel{
                position:absolute;
                top:40px;
                left:40px;
                width:670px;
                height:452px;
                text-align:center;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .textContent{
                width: 100%;
                height: 330px;
                position:absolute;
                top:500px;
                left:0;
                input{
                    display:block;
                    background:none;
                    border:0;
                    width:90%;
                    margin-left:5%;
                    color: #454545;
                }
                .title1{
                    margin-top: 34px;
                    height: 50px;
                    font-size: 33px;
                    line-height: 50px;
                }
                .title2{
                    height:33px;
                    font-size: 22px;
                    line-height: 33px;
                }
                 textarea{
                    display:block;
                    background:none;
                    width:90%;
                    margin-left:5%;
                    height:135px;
                    border:0;
                    margin-top:40px;
                    font-size: 24px;
                    color: #454545;
                    // padding-top:50px;
                }
                .line{
                    width: 90%;
                    margin-left: 5%;
                    height: 2px;
                    background: #454545;
                }
            }
        }
         .mainSlide2{
            background: #fff;
            .uploadImg{
                position:absolute;
                top:40px;
                left:140px;
                width:470px;
                height:452px;
                border:0;
                background:none;
                z-index:10;
                opacity:0;
            }
             .textContent{
                 .left{
                    float:left;
                    width:50%;
                    height:100%;
                       input{
                        height:40px;
                        background:none;
                        border:0;
                        width:90%;
                        margin-left:5%;
                        display:block;
                        font-size: 34px;
                        text-align:center;
                        color: #737373;
                    }
                    .title1{
                       font-size: 33px;
                       margin-top: 70px;
                    }
                    .title2{
                       font-size: 22px;
                    }
                    .line{
                        width:90%;
                        margin-left:5%;
                        height: 2px;
                        background:  #737373;
                    }
                 }
                 .right{
                    float:left;
                    width:50%;
                    height:100%;
                     textarea{
                        display:block;
                        background:none;
                        width:80%;
                        margin-left:10%;
                        height:165px;
                        border:0;
                        font-size: 24px;
                        color: #737373;
                         margin-top: 70px;
                    }
                 }
             }
        }
        .mainSlide3{
            width:100%;
            height:452px;
            background: #CDC9BE;
            position:relative;
            .uploadImg{
                position:absolute;
                top:40px;
                left:140px;
                width:470px;
                height:452px;
                border:0;
                background:none;
                z-index:10;
                opacity:0;
            }
            .el-carousel{
                position:absolute;
                top:40px;
                left:40px;
                width:670px;
                height:452px;
                text-align:center;
                img{
                    width:100%;
                    height:100%;
                }
            }
        }
        .foot{
            width:100%;
            height:315px;
            background:#fff;
            .left{
                float:left;
                width:50%;
                height:100%;
                textarea{
                    display:block;
                    // text-align:center;
                    background:none;
                    width:90%;
                    margin-left:10%;
                    height:244px;
                    border:0;
                    margin-top:50px;
                    font-size: 24px;
                    // padding-top:20px;
                    color: #737373;
                    // padding-top:50px;
                }
            }
            .right{
                float:left;
                width:50%;
                height:100%;
                  input{
                    height:40px;
                    background:none;
                    border:0;
                      width:80%;
                    margin-left:10%;
                    display:block;
                    font-size: 34px;
                    margin-top:80px;
                    text-align:center;
                }
                 textarea{
                    display:block;
                    // text-align:center;
                    background:none;
                    width:80%;
                    margin-left:10%;
                    height:80px;
                    border:0;
                    // margin-top:50px;
                    font-size: 22px;
                    color: #737373;
                    // padding-top:50px;
                }
                .title{
                    font-size: 24px;
                }

            }
        }
        .showContent{
            width:100%;
            // height:1200px;
            background: #fff;
            img{
                width: 100%;
                   display: block;
                margin:0;
                padding:0;
            }
        }
        .hideContent{
            width:100%;
            // height:1200px;
            background: #fff;
            // display:none;
            position: relative;
            .code{
                width:220px ;
                height: 220px;
                // border:1px solid;
                position: absolute;
                left:265px;
                top:620px;
                z-index: 99;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .num{
                color:#fff;
                width: 600px;
                height:40px;
                line-height: 40px;
                position: absolute;
                top:50px;
                left:40px;
                // border:1px solid;
                z-index: 99;
            }
            img{
                width: 100%;
                display: block;
                margin:0;
                padding:0;
            }
        }
        .finalContent{
            width:100%;
            height:214px;
             background: #CDC9BE;
             .img_line{
                width: 100%;
                display: block;
                margin:0;
                padding:0;
            }
            .content{
                height:184px;
                .left{
                    width: 18%;
                    height: 100%;
                    float:left;
                      position:relative;
                    input{
                        width: 111px;
                        height: 111px;
                        background:none;
                        border:0;
                        top:27px;
                        left:40px;
                        opacity:0;
                        z-index: 99;
                        // margin:27px 0 0 40px;
                        position:absolute;

                    }
                    .codeImg{
                        width: 111px;
                        height: 111px;
                        background: #fff;
                        margin:27px 0 0 40px;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top:0;
                            left:0;
                        }
                    }
                }
                .right{
                    width: 75%;
                    height: 100%;
                    float:left;
                    input{
                        height:40px;
                        background:none;
                        border:0;
                        width:90%;
                        margin-left:5%;
                        display:block;
                        color: #737373;
                        // font-size: 34px;
                        // margin-top:80px;
                        // text-align:center;
                    }
                    .title1{
                        margin-top: 60px;
                        font-size: 28px;
                    }
                    .line{
                        width: 60%;
                        margin-left:5%;
                        height: 1px;
                        background: #737373;
                    }
                     .title2{
                        font-size: 24px;
                    }
                     .title3{
                        font-size: 24px;
                    }
                }
            }
        }
    .upload{
        position: fixed;
        top:50%;
        left: 50%;
        width:100px;
        height:50px;
        color:#fff;
        background:rgba(0,0,0,0.5);
        z-index:19;
        text-align:center;
        line-height:50px;
    }
    }
</style>
